<template>
  <el-form-item :label="title||'企业名称'" name="compName">
    <el-select :value="compName" style="width: 100%;" filterable remote :remote-method="remoteMethod"  @change="onChange" >
      <el-option v-for="item in options" :key="item.companyName" :label="item.companyName"
        :value="item.companyName">
      </el-option>
    </el-select>
  </el-form-item>

</template>
<script>
import { queryCompanyList } from '@/service/company/index';

export default {
  props: ['compName', 'disabled','title'],
  data() {
    return {
      compList: [],
      options:[]

    };
  },
  // watch: {
  //   compShort(newVal, oldVal) {
  //     this.company = newVal;
  //   },
  // },
  mounted() {
    this.loadCompList();
  },
  methods: {
    async loadCompList() {
      const data = await queryCompanyList({});
      if (data.success) {
        this.compList = data.dataList;
        this.options = this.compList;

      } else {
        this.compList = [];
      }
    },

    remoteMethod(query) {
        if (query !== '') {
          setTimeout(() => {
            this.options = this.compList.filter(item => {
              return item.companyName.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = this.compList;
        }
      },
    onChange(val) {
      this.$emit('update:compName', val);
    },
  },
};
</script>

<style>
</style>